<template>
  <!-- <ul class="nowTime" ref="nowTime">
    <li>{{ nowTime }}</li>
  </ul> -->
  <div>
    <div class="weatherDiv">
      <span class="iconfont icon-cloud-full"></span>
      <span class="name">多云</span>
      <span class="temp">17℃ ~ 24℃</span>
    </div>
    <div class="nowTimeDiv">
      <span class="nowDate">{{ nowDate }}</span>
      <span class="nowWeek">{{ nowWeek }}</span>
      <span class="nowTime">{{ nowTime }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyTime",
  data() {
    return {
      nowDate: '',
      nowWeek: '',
      nowTime: "",
    };
  },
  methods: {
    //获取当前时间
    getNowFormatDate: function () {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      let Hour = date.getHours(); // 获取当前小时数(0-23)
      let Minute = date.getMinutes(); // 获取当前分钟数(0-59)
      let Second = date.getSeconds(); // 获取当前秒数(0-59)
      let show_day = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      let day = date.getDay();
      if (Hour < 10) {
        Hour = "0" + Hour;
      }
      if (Minute < 10) {
        Minute = "0" + Minute;
      }
      if (Second < 10) {
        Second = "0" + Second;
      }
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.nowDate = `${year}-${month}-${strDate}`
      this.nowWeek = show_day[day]
      this.nowTime = `${Hour} : ${Minute} : ${Second}`
      setTimeout(this.getNowFormatDate, 1000); //每隔1秒重新调用一次该函数
    },
  },
  created() {},
  mounted() {
    this.getNowFormatDate()
  },
};
</script>

<style lang="scss" scoped>
.weatherDiv{
  position: absolute;
  left: 0.4375rem;
  top: 0.3rem;
  display: flex;
  align-items: center;
  span{
    color: #00A1D5;
    font-size: 0.2rem;
  }
  .name{
    margin: 0 0.2rem 0 0.1rem;
  }
  /* .iconfont{
    color: #00D4FF;
    font-size: 0.2rem;
  }
  .name{
    color: #00D4FF;
    font-size: 0.2rem;
  }
  .temp{
    color: #00D4FF;
    font-size: 0.2rem;
  } */
}
.nowTimeDiv {
  position: absolute;
  right: 0.4375rem;
  top: 0.3rem;
  display: flex;
  align-items: center;
  .nowDate{
    color: #00D4FF;
    font-size: 0.2rem;
  }
  .nowWeek{
    margin: 0 0.2rem;
    color: #00D4FF;
    font-size: 0.2rem;
  }
  .nowTime{
    font-size: 0.3rem;
    color: #EFF8FF;
  }
}
</style>
